import { setToken } from '../../utils/auth'
import { Form, Input, Button } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import ParticlesBg from 'particles-bg'
import './index.scss'

function Login() {
	document.title = '登录'
	const navigate = useNavigate()
  const onFinish = (values) => {
    console.log('Received values:', values)
    // 在这里处理登录逻辑
    // 可以使用 values.username 和 values.password
		setToken('token', '123456')
		navigate('/home')
  }

  return (
		<>
			<ParticlesBg type="ball" bg={true} />
			<div className="login_page">
				<h1>Login</h1>
				<Form onFinish={onFinish}>
					<Form.Item
						name="username"
						rules={[{ required: true, message: 'Please enter your username' }]}
					>
						<Input prefix={<UserOutlined />} placeholder="Username" />
					</Form.Item>
					<Form.Item
						name="password"
						rules={[{ required: true, message: 'Please enter your password' }]}
					>
						<Input.Password prefix={<LockOutlined />} placeholder="Password" />
					</Form.Item>
					<Form.Item>
						<Button type="primary" htmlType="submit" block>
							Login
						</Button>
					</Form.Item>
				</Form>
			</div>
		</>
  )
}

export default Login